AMP Iframe Infinite Loader Error

Infinite Loader in the AMP Iframe. AMP Validation Error: “Invalid URL protocol ‘http:’ for attribute ‘src’ in tag ‘amp-iframe’.”

Similar to other Iframe issues, the iframe contents on Magento 2 AMP pages are missing. Instead, the loader gets stuck spinning and never loads.

Please see the screenshot below:

Issue Description

This issue happens when HTTPS protocol is not enabled for AMP Iframe. According to the official AMP.DEV documentation, “An amp-iframe must only request resources via HTTPS”, hence loading AMP Iframe source via HTTP protocol will result in an infinite loader to be displayed.

Another way to debug this issue is by validating AMP versions of your product pages. Here is a validation error you may encounter when HTTPS protocol is not enabled: “Invalid URL protocol ‘http:’ for attribute ‘src’ in tag ‘amp-iframe’.“

SOLUTION

Step 1

Contact your web hosting company and inquire about an SSL certificate for the main domain and “www” subdomain.

Step 2

Set up your Magento 2.x to work via HTTPS, go to your Magento admin panel > Stores > Configuration > Web.

1. Expand the Base URLs section and change the protocol in the Base URL field: From http://domain.com/ > To https://domain.com/
2. Expand the Base URLs (Secure) section and change the URL in the Secure Base URL field: From http://domain.com/ > To https://domain.com/